<template>
  <div class="w-[100%]">
    <div class="title flex items-center justify-between">
      <div class="flex  items-center">
        <div class="mr-[15px] cursor-pointer transition"
             :class="index == activeTab2 ? `text-[20px]` : `text-[16px] text-[#999999]`"
             v-for="(item,index) in tab2" :key="index"
             @click="handleBtnClick({type:'tab',index})"
        >
          {{ item.name }}
        </div>

      </div>

      <div class="flex" v-if="activeTab2 == 0">

        <div class="tab flex">
          <div class="tab-li flex-center transition"
               :class="`${ activeTab1 == index ? 'active' : '' }`"
               v-for="(item,index) in tab1" :key="index"
               @click="handleBtnClick({type:'tab1',index})"
          >
            {{ item.name }}
          </div>
        </div>


        <div class="tab flex ml-[15px]">
          <div class="tab-li flex-center transition"
               @click="handleBtnClick({type:'all'})"
               style="border-left: solid 1px #E4E4E4;border-radius: 8px;"
          >
            更多
          </div>
        </div>


      </div>


      <div class="flex" v-if="activeTab2 == 1">

        <div class="tab flex">
          <div class="tab-li flex-center transition"
               :class="`${ activeTab3 == index ? 'active' : '' }`"
               v-for="(item,index) in tab3" :key="index"
               @click="handleBtnClick({type:'tab3',index})"
          >
            {{ item.name }}
          </div>
        </div>

      </div>



    </div>

    <div class="module mt-[20px] flex justify-between w-[100%]">
      <QueryTable
        v-if="activeTab2 == 0"
        pk="id"
        :list="dataList"
        :total="0"
        :btns="[]"
        @execute="handleBtnClick"
        v-model="queryParams"
        :thead="th"
        :show-action="false"
        :show-expand="false"
        :show-section="false"
      >

        <template #productName="{row}">
            <div class="flex">
              <div>
                <ImagePreview :src="row.cover" width="50px" height="50px"/>
              </div>

              <div class="ml-[10px]">
                <div class="w-[200px]" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;" :title="row.title">{{ row.title }}</div>
                <div>
                  <a href="" target="_blank">{{ row.promotionLink }}</a>
                </div>
              </div>

            </div>
        </template>

        <template #rank="{index}">
          <div class="flex-center">

            <div v-if="index >2">
              {{  (index+1) }}
            </div>

            <div
              v-else
              class="bg w-[30px] h-[30px]" :style="`background-image:url(${ rank[index] })`">

            </div>
         </div>
        </template>

      </QueryTable>

      <QueryTable
        v-if="activeTab2 == 1 && activeTab3 == 0"
        pk="id"
        :list="dataList"
        :total="0"
        :btns="[]"
        @execute="handleBtnClick"
        v-model="queryParams"
        :thead="thOrder"
        :show-action="false"
        :show-expand="false"
        :show-section="false"
      />


      <QueryTable
        v-if="activeTab2 == 1 && activeTab3 == 1"
        pk="id"
        :list="dataList"
        :total="0"
        :btns="[]"
        @execute="handleBtnClick"
        v-model="queryParams"
        :thead="thOrderSign"
        :show-action="false"
        :show-expand="false"
        :show-section="false"
      />


    </div>

  </div>
</template>
<script setup lang="ts">
import QueryTable from "@/components/TableData/index.vue"
import {getProductHot,getProductOrder,getProductOrderSign} from "@/api/home";
import router from "@/router";

const activeTab1 = ref(0)
const tab1 = ref([
  {
    name: "昨日",
    type: '1'
  },
  {
    name: "今日",
    type: '2'
  },
  {
    name: "7天",
    type: 3
  },
  {
    name: "30天",
    type: '4'
  }
])

const activeTab2 = ref(0)
const tab2 = ref([
  {
    name: "商品热销榜"
  },
  {
    name: "订单统计"
  }
])

const activeTab3 = ref(0)
const tab3 = ref([
  {
    name: "订单处理"
  },
  {
    name: "订单签收"
  }
])


const dataList = ref([])

const queryParams = ref({})

const th = ref([
  {
    name: '排名',
    code: 'rank',
    required: true
  },
  {
    name: '商品',
    code: 'productName',
    required: true,
    width:"300px"
  },
  {
    name: '访问数',
    code: 'visit',
    required: true
  },
  {
    name: '有效订单',
    code: 'validCount',
    required: true
  },
  {
    name: '总订单',
    code: 'totalCount',
    required: true
  },
  {
    name: '转化率',
    code: 'conversionRate',
    required: true
  },

])

const thOrder = ref([
  {
    name: '日期',
    code: 'dataDate',
    required: true
  },
  {
    name: '总订单数',
    code: 'totalCount',
    required: true,
  },
  {
    name: '有效订单数',
    code: 'validCount',
    required: true
  },
  {
    name: '无效订单数',
    code: 'invalidCount',
    required: true
  },
  {
    name: '有效比',
    code: 'validRatio',
    required: true
  },
  {
    name: '采购数',
    code: 'purchaseCount',
    required: true
  },
  {
    name: '发货数',
    code: 'shippedCount',
    required: true
  },

])

const thOrderSign = ref([
  {
    name: '日期',
    code: 'dataDate',
    required: true
  },
  {
    name: '签收数',
    code: 'signCount',
    required: true,
  },
  {
    name: '拒收数',
    code: 'rejectionCount',
    required: true
  },
  {
    name: '售后订单',
    code: 'afterSales',
    required: true
  },
  {
    name: '异常订单',
    code: 'abnormal',
    required: true
  },
  {
    name: '转寄数',
    code: 'forwarding',
    required: true
  },

])


const rank = {
  0:"https://img.alicdn.com/imgextra/i3/801089336/O1CN01OGOb2g2IpwklLBm97_!!801089336.png",
  1:"https://img.alicdn.com/imgextra/i3/801089336/O1CN01l073vS2IpwkmT819s_!!801089336.png",
  2:"https://img.alicdn.com/imgextra/i2/801089336/O1CN01YFpqGh2IpwkmDGsn3_!!801089336.png"
}


const handleBtnClick = e => {
  let type = e.type;
  try {
    fn[type](e)
  } catch (e) {
    console.log(`${type}不存在`)
  }
}

const fn = {
  tab1({index}) {
    if (activeTab1.value != index) {
      activeTab1.value = index;
      queryData()
      console.log("111")
    }
  },
  tab({index}) {
    console.log("???",index,activeTab1.value)
    if (activeTab2.value != index) {
      activeTab2.value = index;
      queryData()
      console.log("222")
    }
  },
  tab3({index}) {
    if (activeTab3.value != index) {
      activeTab3.value = index;
      queryData()
    }
  },
  all(){
    if (activeTab2.value == 0) {
      router.push(`/statistics/analysis/product`)
    }else{
      router.push(`/statistics/analysis/order`)
    }
  }
}

const queryData = async () => {
  if (activeTab2.value == 0) {
    let res = await getProductHot({
      type: tab1.value[activeTab1.value].type
    });
    dataList.value = res

    console.log(res)
  }else{
    if(activeTab3.value == 0){
      let res = await getProductOrder();
      dataList.value = res
      console.log(res,"rrrr")
    }else{
      let res = await getProductOrderSign();
      dataList.value = res
    }


  }

}

onMounted(() => {
  queryData();
})

</script>
<style lang="scss" scoped>
.module-li {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.4);

}

:deep(.el-card__body) {
  padding: 0;
}


.tab {
  .tab-li {
    border: solid 1px #E4E4E4;
    color: #666666;
    background: #FAFAFA;
    padding: 0 20px;
    height: 36px;

    &:nth-of-type(1) {
      border-radius: 8px 0 0 8px;
    }


    &:nth-last-of-type(1) {
      border-left: solid 1px rgba(0, 0, 0, 0);
      border-radius: 0 8px 8px 0;
    }


    &.active {
      border: solid 1px #3721FF;
      color: #3721FF;
      background: #EFEEFF;
    }

  }

}

</style>
